<template>
  <div>
    <el-dialog title="添加施肥信息" :visible.sync="dialogFormVisible">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>园地名称</span>
        </div>
        <el-form
        :model="form"
        v-loading="fetchLoading"
        class="sectionForm"
        size="mini"
        element-loading-text="数据加载中,请耐心等待..."
        label-width="80px"
        label-position="right">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="园地名称">
                  <!-- <el-input v-model="form.gardenName" placeholder="园地名称"></el-input> -->
                  <el-select v-model="form.gardenPlot" placeholder="园地名称" style="width:100%" value-key="gardenId">
                  <el-option v-for="item in gardenPlotList"
                    :key="item.value"
                    :label="item.gardenName"
                    :value="item"/>
              </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="园地面积">
                  <el-input v-model="form.gardenPlot.gardenArea" placeholder="园地面积" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="种植品种">
                  <!-- <el-input v-model="form.gardenPlot.gardenVar" placeholder="种植品种"></el-input> -->
              <el-select v-model="form.gardenPlot.gardenVar" style="width:100%" disabled placeholder="种植品种">
                <el-option label="苹果" value="apple"></el-option>
                <el-option label="香蕉" value="banana"></el-option>
              </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="果树数量">
                  <el-input v-model="form.gardenPlot.gardenSnum" disabled placeholder="果树数量"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>肥料信息</span>
        </div>
        <el-form
        :model="form"
        v-loading="fetchLoading"
        class="sectionForm"
        size="mini"
        element-loading-text="数据加载中,请耐心等待..."
        label-width="80px"
        label-position="right">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="肥料名称">
                  <!-- <el-input v-model="form.plantFood" placeholder="肥料名称"></el-input> -->
                  <el-select v-model="form.plantFood.plantName" placeholder="园地名称" style="width:100%" value-key="plantId">
                  <el-option v-for="item in plantFoodList"
                    :key="item.value"
                    :label="item.plantName"
                    :value="item"/>
              </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购买序号">
                  <el-input v-model="form.plantFood.plantSerialNum" disabled placeholder="购买序号"></el-input>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="肥料编号">
                  <el-input v-model="form.plantFood.plantNum" disabled placeholder="肥料编号"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="购买单价">
                  <el-input v-model="form.plantFood.plantUnitPrice" disabled placeholder="购买单价"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="购买总量">
                  <el-input v-model="form.plantFood.plantQuantity" disabled placeholder="购买总量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购买总额">
                  <el-input v-model="form.plantFood.plantTotalPrice" disabled placeholder="购买总额"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="余存数量">
                  <el-input v-model="form.plantFood.count" disabled placeholder="余存数量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="余存总额">
                  <el-input v-model="form.plantFood.countPric" disabled  placeholder="余存总额"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>施肥信息</span>
        </div>
        <el-form
        :model="form"
        v-loading="fetchLoading"
        class="sectionForm"
        size="mini"
        element-loading-text="数据加载中,请耐心等待..."
        label-width="80px"
        label-position="right">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="施肥数量">
                  <el-input v-model="form.ferQuantity" @blur="change" placeholder="施肥数量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="施肥总额">
                  <el-input v-model="form.ferTotalPrice" disabled placeholder="施肥总额"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="施肥日期">
                 <el-date-picker v-model="form.ferDate" type="date" placeholder="施肥日期"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" v-if="type==='add'" @click="add">确认添加</el-button>
        <el-button type="primary" v-else @click="add">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getList} from '@/api/baseInfo/gardenInfo'
import {getFerList} from '@/api/baseInfo/manurePur'
export default{
  name:'add',
  props:{
    type:{
      type:String,
    }
  },
  data(){
    return {
      dialogFormVisible:false,
      fetchLoading: false,
      form: {
        gardenPlot: {
          gardenName: '',
          gardenArea: '',
          gardenVar: '',
          gardenSnum: '',
        },
        // gardenName: '',
        // gardenArea: '',
        // gardenVar: '',
        // gardenSnum: '',
        plantFood :{
          plantSerialNum: '',
          plantNum: '',
          plantName: '',
          plantUnitPrice: '',
          plantQuantity: '',
          plantTotalPrice: '',
          count: '',
          countPric: ''
        },
        // plantSerialNum: '',
        // plantNum: '',
        // plantName: '',
        // plantUnitPrice: '',
        // plantQuantity: '',
        ferQuantity: '',
        ferTotalPrice: '',
        ferDate: '',
        remark: '',
        gardenId: '',
        plantId: ''
      },
      gardenPlotList: [],
      plantFoodList: []
    }
  },
  created(){
    this.getList()
    this.getFerList()
  },
  methods:{
    async add(){
      this.dialogFormVisible = false
      this.form.gardenId = this.form.gardenPlot.gardenId
      this.form.plantId = this.form.plantFood.plantId
      // this.$emit("save",)
      try{
        let res=await this.$API.spreadManureInfo.saveOrUpdate(this.form)
        if(res.code==200){
          this.$message({type:"success",message:this.type==="add"?"添加成功":"修改成功"})
          this.$parent.updatePageList()
          Object.assign(this.$data.form, this.$options.data().form)
        }
      }catch{
        this.$message({type:"error",message:this.type==="add"?"添加失败":"修改失败"})
      }
    },
    change(){
      if(this.form.ferQuantity > this.form.plantFood.count){
         return this.$message({type:"error",message:"余存数量不足"})
      }
      this.form.ferTotalPrice = this.form.ferQuantity * this.form.plantFood.plantUnitPrice 
    },
    getList(){
      getList({}).then(res =>{
        console.log(res,'res111')
        if(res.code === 200){
          console.log(res.data)
          this.gardenPlotList = res.data

        }
      })
    },

    getFerList(){
      getFerList({}).then(res =>{
        if(res.code === 200){
          console.log(res.data)
          this.plantFoodList = res.data

        }
      })
    },

    cancel(){
      this.dialogFormVisible = false
      Object.assign(this.$data.form, this.$options.data().form)
    },
    // async add(){
    //   this.dialogFormVisible = false
    //   // this.$emit("save",)
    //   try{
    //     let res=await this.$API.pesticiedePur.saveOrUpdate(this.form)
    //     if(res.code==200){
    //       this.$message({type:"success",message:this.type==="add"?"添加成功":"修改成功"})
    //       this.$parent.updatePageList()
    //       Object.assign(this.$data.form, this.$options.data().form)
    //     }
    //   }catch{
    //     this.$message({type:"error",message:this.type==="add"?"添加失败":"修改失败"})
    //   }
    // }

  }
}
</script>

<style scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-bottom: 20px;
  }
</style>